<template>
  <div class="institution">
    <div class="top">
      <queryInput
        id="name"
        name="机构名称"
        :value="query.name"
        @update:value="handleUpdate"
      />
      <div>
        <el-button type="primary" @click="handle_query">查询</el-button>
        <el-button @click="handle_resetting">重置</el-button>
      </div>
    </div>
    <div class="cont">
      <div class="cont_top">
        <div class="total_box">
          机构总计：
          <span>{{ total }}</span>
        </div>
        <div class="operate">
          <!-- <el-button>导出</el-button> -->
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        row-key="name"
        :header-cell-style="{
          backgroundColor: '#f7f8fa',
          color: '#8c8c8c',
          fontWeight: 400,
          cursor: 'pointer',
        }"
        :cell-style="{ color: '#000' }"
        :default-expand-all="expand"
      >
        <template #empty>
          <el-empty :image-size="100" description="暂无数据" />
        </template>
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="name" label="机构名称" />
        <el-table-column prop="organizationid" label="机构编码" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { orgAll } from "@/api/basic";
import { onMounted, reactive, ref } from "vue";

const loading = ref(false);
const expand = ref(false);
const total = ref(0);
const query = reactive({
  name: "",
});
const tableData = ref([]);
const treeData = ref([]);

//更新查询数据
const handleUpdate = ({ key, value }) => {
  query[key] = value;
  if (!value) {
    get_orgAll();
  }
};

//查询 - 重置
const handle_resetting = () => {
  query.name = "";
  get_orgAll();
};

//查询
const handle_query = () => {
  if (!query.name.trim()) return;
  const searchResults = [];
  searchTree(query.name, treeData.value, null, null, searchResults);
  tableData.value = searchResults;
  expand.value = true;
};

const searchTree = (
  val,
  data,
  currentParent = null,
  highestParent = null,
  searchResults = []
) => {
  if (!val) {
    get_orgAll();
  }

  const isMatch = (item) => item.name.includes(val);
  const isInResults = (item) =>
    searchResults.some(
      (result) => result.organizationid === item.organizationid
    );

  data.forEach((item) => {
    if (!highestParent && currentParent) {
      highestParent = currentParent;
    }

    if (isMatch(item) && !isInResults(item)) {
      searchResults.push(highestParent ? highestParent : item);
    }

    if (item.children && item.children.length > 0) {
      searchTree(
        val,
        item.children,
        item,
        highestParent || item,
        searchResults
      );
    }
  });
};
//获取机构数据
let time = ref(null);
const get_orgAll = async () => {
  loading.value = true;
  expand.value = false;

  const res = await orgAll({});

  time.value = setTimeout(() => {
    loading.value = false;
  }, 5000);

  if (res.code === 200) {
    clearTimeout(time.value); // 清除定时器
    time.value = null;
    tableData.value = res.data;
    treeData.value = res.data;
    total.value = res.data.length;
    loading.value = false;
  }
};

onMounted(async () => {
  await get_orgAll();
});
</script>

<style lang="scss" scoped>
.institution {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .top {
    width: 100%;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    > div {
      width: calc((100% - (6 - 1) * 30px) / 4);
      height: 40px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  .cont {
    flex: 1;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    .cont_top {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .total_box > span {
        font-weight: bold;
      }

      .operate {
        display: flex;
        gap: 10px;
      }
    }

    .cont_button {
      width: 100%;
      height: 40px;
      margin-top: 10px;
      display: flex;
      justify-content: end;
      align-items: center;
    }
  }
}
.el-table {
  max-height: 640px;
}
.total > span {
  margin: 0 5px;
}

.el-button {
  margin: 0;
}
</style>